<template>
  <div class="myord">
    <div class="header">
        我的订单
        <router-link tag="div" to="/person" class="back">
            <img src="../assets/imgs/返回箭头.png" alt="">
        </router-link>
    </div>
   <van-tabs v-model="activeName">
        <van-tab title="全部" name="a">
            <div class="item" v-if="isoklists!=''">
                <div class="bt">
                    <div class="imgs">
                        <img :src="isoklists.sptimgs" alt="">
                    </div>
                    <div class="shop">
                        {{isoklists.dianpuname}}
                    </div>
                    <div class="jtimgs">
                        <img src="../assets/imgs/向右箭头.png" alt="">
                    </div>
                </div>
                <div class="msg">
                    <div class="bigpic">
                        <img :src="isoklists.sptimgs" alt="">
                    </div>
                    <div class="right">
                        <h1>{{isoklists.titles}}</h1>
                        <!-- <p>999</p> -->
                    </div>
                </div>
                <div class="money">
                    <div class="ticket">
                        <div class="imgs">
                            <img src="../assets/imgs/优惠卷.png" alt="">
                        </div>
                        <p>实际付款：￥{{isoklists.overprice}}元</p>
                    </div>
                </div>
                <div class="more">
                    <div class="p">更多</div>
                    <div class="doit moneyback">申请退款</div>
                    <div class="doit again">再次拼单</div>
                    <div class="doit nowsay">立即评价</div>
                </div>
            </div>
        </van-tab>
        <van-tab title="待付款" name="b">
            <div class="nothing">
                <div class="bigbox">
                    <div class="imgs">
                        <img src="../assets/imgs/订单.png" alt="">
                    </div>
                    <p>没找到您的订单，简易您切换账号找找看哦</p>
                </div>
            </div>
        </van-tab>
        <van-tab title="待发货" name="c">
            <div class="item" v-if="overorder!=''">
                <div class="bt">
                    <div class="imgs">
                        <img :src="overorder.sptimgs" alt="">
                    </div>
                    <div class="shop">
                        {{overorder.dianpuname}}
                    </div>
                    <div class="jtimgs">
                        <img src="../assets/imgs/向右箭头.png" alt="">
                    </div>
                </div>
                <div class="msg">
                    <div class="bigpic">
                        <img :src="overorder.sptimgs" alt="">
                    </div>
                    <div class="right">
                        <h1>{{overorder.titles}}</h1>
                        <!-- <p>999</p> -->
                    </div>
                </div>
                <div class="money">
                    <div class="ticket">
                        <div class="imgs">
                            <img src="../assets/imgs/优惠卷.png" alt="">
                        </div>
                        <p>实际付款：￥{{overorder.overprice}}元</p>
                    </div>
                </div>
                <div class="more">
                    <div class="p">更多</div>
                    <div class="doit moneyback">申请退款</div>
                    <!-- <div class="doit again">再次拼单</div> -->
                    <!-- <div class="doit nowsay">立即评价</div> -->
                    <div class="doit nowsay" @click="goodisok">确认收货</div>
                </div>
            </div>
        </van-tab>
        <van-tab title="待收货" name="d">
            <div class="nothing">
                <div class="bigbox">
                    <div class="imgs">
                        <img src="../assets/imgs/订单.png" alt="">
                    </div>
                    <p>没找到您的订单，简易您切换账号找找看哦</p>
                </div>
            </div>
        </van-tab>
        <van-tab title="评价" name="e">
            <div class="nothing">
                <div class="bigbox">
                    <div class="imgs">
                        <img src="../assets/imgs/订单.png" alt="">
                    </div>
                    <p>没找到您的订单，简易您切换账号找找看哦</p>
                </div>
            </div>
        </van-tab>
    </van-tabs>
    <!-- 精选推荐 -->
    <div class="tuijian">
        <div class="tp"><img src="../assets/imgs/精选推荐.jpg" alt=""></div>
        <div class="wenzi" style="margin-left: 12px;">精选推荐</div>
    </div>
    <div class="container">
        <div class="dalei" >
          <router-link tag="div" :to="'/show?id='+item.id" class="items" v-for="(item,index) in homelists" :key="index">
            <div class="imgs">
              <img :src="item.sptimgs" alt="" />
            </div>
            <div class="title"><p>{{item.titles}}</p></div>
            <div class="show">
              <p>{{item.isea}}</p>
            </div>
            <div class="money">
              <span class="qian">{{item.qianq}}</span>{{item.qianh}}
              <span class="hou">{{item.hou}}</span>
            </div>
          </router-link>
        </div>
      </div>
  </div>
</template>

<script>
import { getapidata } from "../api/newsele";
export default {
    props:["homelists"],
    data(){
        return{
            lists:[
                {
                    sptimgs:require("../assets/sptimgs/01.jpg"),
                    titles:"冲量特卖蒙牛正品真果粒牛奶饮品250g*12盒装",
                    idea:"满100减5",
                    qianq:"50.",
                    qianh:"9",
                    hou:"已拼了999件",
                },
                {
                    sptimgs:require("../assets/sptimgs/02.jpg"),
                    titles:"冲量特卖蒙牛正品真果粒牛奶饮品250g*12盒装",
                    idea:"满100减5",
                    qianq:"50.",
                    qianh:"9",
                    hou:"已拼了999件",
                },
                {
                    sptimgs:require("../assets/sptimgs/03.jpg"),
                    titles:"冲量特卖蒙牛正品真果粒牛奶饮品250g*12盒装",
                    idea:"满100减5",
                    qianq:"50.",
                    qianh:"9",
                    hou:"已拼了999件",
                },
                {
                    sptimgs:require("../assets/sptimgs/04.jpg"),
                    titles:"冲量特卖蒙牛正品真果粒牛奶饮品250g*12盒装",
                    idea:"满100减5",
                    qianq:"50.",
                    qianh:"9",
                    hou:"已拼了999件",
                },
                {
                    sptimgs:require("../assets/sptimgs/05.jpg"),
                    titles:"冲量特卖蒙牛正品真果粒牛奶饮品250g*12盒装",
                    idea:"满100减5",
                    qianq:"50.",
                    qianh:"9",
                    hou:"已拼了999件",
                },
                {
                    sptimgs:require("../assets/sptimgs/06.jpg"),
                    titles:"冲量特卖蒙牛正品真果粒牛奶饮品250g*12盒装",
                    idea:"满100减5",
                    qianq:"50.",
                    qianh:"9",
                    hou:"已拼了999件",
                },
            ],
             activeName: 'a',
             orderlists:"",
             overorder:[],
             isoklists:[]
        }
    },
    methods:{
        goodisok(){
            console.log(this.overorder)
            this.isoklists = this.overorder
            console.log(this.isoklists)
            this.overorder = ''
        }
    },
    created(){
        getapidata().then(data=>{
            this.orderlists = data.orderlists
        })
        let payover = JSON.parse(window.localStorage.getItem("orderdata"))
        this.overorder = payover
        console.log(this.overorder)
    }
}
</script>

<style lang="scss">
.bigbox{
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #dfdfdf;
    .imgs{
        width: 70px;
        height: 70px;
        img{
            width: 100%;
        }
    }
    p{
        font-size: 14px;
    }
}
.myord .item{
    .more{
        width: 100%;
        height: 30px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .doit{
            margin: 0 2px;
            display: inline-block;
            width: 80px;
            height: 20px;
            border: 1px solid #000;
            border-radius: 5px;
            font-size: 14px;
            &.nowsay{
                background-color: red;
                color: #fff;
            }
        }
        .p{
            font-size: 14px;
            height: 30px;
            width: 36px;
            text-align: center;
            line-height: 30px;
            display: inline-block;
        }
    }
    .ticket{
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 12px;
        p{
            display: inline-block;
        }
        .imgs{
            width: 20px;
            height: 20px;
            display: inline-block;
            img{
                width: 100%;
            }
        }
    }
}
.myord .item{
    width: 96%;
    margin: 0 auto;
    border-bottom: 1px solid #686161;
    .shop{
        margin-left: 10px;
        font-size: 12px;
        line-height: 30px;
    }
    .msg{
        width: 100%;
        display: flex;
        .right{
            padding: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            h1{
                font-size: 14px;
            }
            p{
                font-size: 12px;
                color: #292929;
            }
        }
        .bigpic{
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
    }
}
.myord .item .bt{
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    .imgs{
        width: 30px;
        height: 30px;
        border-radius: 5px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .jtimgs{
        width: 16px;
        height: 16px;
        img{
            width: 100%;
        }
    }
}

.order>div{
    width: 100%;
    background-color: red;
}
.myord  .dalei {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #efeeeb;
}
.myord  .dalei .items {
  display: block;
  width: 48%;
  height: 255px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  justify-content: space-around;
}
.myord  .dalei .items .imgs {
  width: 180px;
  height: 180px;
}
.myord  .dalei .items .imgs img {
  width: 100%;
}
.myord  .dalei .items p {
  font-size: 14px;
  color:#000;
  text-align: left;
}
.myord  .dalei .items .money {
  color: red;
  font-size: 10px;
  text-indent: 1em;
}
.myord  .dalei .items .qian {
  font-size: 14px;
}
.myord  .dalei .items .hou {
  font-size: 14px;
  color: #888888;
}
        .myord body{
            background-color: #f0f0f0;
        }
        * {
            margin: 0;
            padding: 0;
        }

        .myord .header {
            width: 100%;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 18px;
            font-weight: 600;
            position: relative;
            background-color: #fff;
        }

        .myord .nav {
            width: 100%;
            height: 20px;
            display: flex;
            background-color: #fff;
        }

        .myord .nav .items {
            flex: 1;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 16px;

        }

        .myord .nav .items.con {
            color: red;
        }

        .myord .header a {
            display: block;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 4px;
            left: 10px;
        }

        .myord .header a img {
            width: 100%;
        }

        .myord .tuijian {
            width: 100%;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff1c24;
            font-size: 16px;
            background-color: #fff;
            margin-top: 10px;
        }

        .myord .tuijian .tp {
            width: 18px;
            height: 18px;
        }

        .myord .tuijian .tp img {
            width: 100%;
        }
        
        .myord a{
            text-decoration: none;
        }
        
        .myord .items .imgs{
            width: 100%;
            height: 70%;  
            /* background-color: pink; */
        }
        .myord .items .imgs img{
            width: 100%;
        }
        .myord .items .wnzi{
            width: 100%;
            height: 30%;
            margin-top: 2px;
            /* background-color: yellow; */
            box-sizing: border-box  ;
            padding: 6px;
        }
        .myord .wnzi p{
            width: 100%;
            margin-top: 6px;
        }
        .myord .back{
            position: absolute;
            width: 20px;
            height: 20px;
            top: 20px;
            left: 10px;
            display: block  ;
        }
        .myord .back img{
            width: 100%;
        }
</style>